<template>
	<view id="card-pane" :class="hasBorder ? 'card-pane-border' : 'card-pane'">
		<u-avatar style="margin-left: 10rpx;" shape="square" :size="48" :src="imageUrl" />
		<view style="display: flex; flex-direction: column; margin-left: 30rpx">
			<view>
				<text class="text">连接名:</text>
				{{ name }}
			</view>
			<view>
				<text class="text">端口号:</text>
				{{ port }}
			</view>
			<view>
				<text class="text">连接IP:</text>
				{{ ip }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "connectioncard",
		props: {
			imageUrl: String,
			name: String,
			port: String,
			ip: String,
			id: Number,
			hasBorder: {
				default: true
			},
			hasNavigateTo: {
				default: true
			}
		},
		data() {
			return {}
		},
		methods: {
		},
	}
</script>

<style>
	.card-pane {
		width: 350rpx;
		height: 150rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.card-pane-border {
		width: 350rpx;
		height: 150rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border: 2rpx #d9d9d9 solid;
		margin: 10rpx;
	}

	.text {
		width: 150rpx;
		margin-right: 5rpx;
	}
	
	view view {
		font-size: 20rpx
	}
</style>
